<template>
    <div id="imgDownEdit">
        <div class="top">
            <div class="item">
                <span>编号：</span>
                <Input placeholder="编号" style="width: 300px" disabled  v-model="info.id" />
            </div>

            <div class="item">
                <span>被赞次数：</span>
                <Input placeholder="被赞次数" style="width: 300px" disabled  v-model="info.showNum"/>
            </div>
            <div class="item">
                <span>足迹图片：</span>
                <img :src="info.imgPath">
            </div>
             <div class="item">
                <span>足迹文章：</span>
                <Input type="textarea" :rows="4" style="width: 300px"  disabled  v-model="info.centent" />
            </div>

            <div class="item">
               <Button type="primary" icon="md-arrow-back" style="width: 300px;margin-left:93px ;" @click = "back">确定</Button>
            </div>

        </div>
    </div>
</template>

<script>
//组件详情页面
import {details} from '@/network/allMessage/imgDown' 

export default {
    name:'imgDownEdit',
    data(){
        return{
            info:''
        }
    },
    methods:{
        back(){
            this.$router.go(-1);//返回上一层
        }
    },
    created(){
        //this.$route.params.id接收传来的值
        //记录一下前端session的使用方法，因为刷新会丢失数据所以要保存一下
        
        if (typeof(Storage) !== "undefined") {
            //储存数据
            if(typeof(sessionStorage.getItem("id")) == "undefined"){
                //第一次进入
                sessionStorage.setItem("id",this.$route.params.id)
            }else{
                if(typeof(this.$route.params.id) !== "undefined"){
                    //如果是进入一个新的会保存上一次的id（但不是刷新）
                    sessionStorage.setItem("id",this.$route.params.id)
                }
            }
        }
        //sessionStorage.getItem("id")读取数据

        //刷新页面直接取数据sessionStorage.getItem("id")
        details(sessionStorage.getItem("id")).then( res => {
            this.info = res.data.result[0]
            //console.log(res)
        }).catch( err => {
            console.log(err)
        })
    }
}
</script>

<style lang="scss" scoped>
.item{
    margin: 10px 0;
    span{
        display: inline-block;
        width: 100px;
        font-size: 14px;
        font-weight: bold;
    }
    img{
        width: 300px;
        height: 100px;
        display: inline-block;
    }
}
</style>